
<!DOCTYPE html>
    <html lang="en">

    <head>
        <meta charset="utf-8" />
        <title>Landrick - Saas & Software Landing Page Template</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta name="description" content="Premium Bootstrap 4 Landing Page Template" />
        <meta name="keywords" content="Saas, Software, multi-uses, HTML, Clean, Modern" />
        <meta name="author" content="Shreethemes" />
        <meta name="email" content="shreethemes@gmail.com" />
        <meta name="website" content="http://www.shreethemes.in" />
        <meta name="Version" content="v2.2" />
        <!-- favicon -->
        <link rel="shortcut icon" href="images/favicon.ico">
        <!-- Bootstrap -->
        <link href="css/bootstrap.min.css" rel="stylesheet" type="text/css" />
        <!-- Magnific -->
        <link href="css/magnific-popup.css" rel="stylesheet" type="text/css" />
        <!-- Slider -->               
        <link rel="stylesheet" href="css/owl.carousel.min.css"/> 
        <link rel="stylesheet" href="css/owl.theme.default.min.css"/> 
        <!-- Icons -->
        <link href="css/materialdesignicons.min.css" rel="stylesheet" type="text/css" />
        <link rel="stylesheet" href="https://unicons.iconscout.com/release/v2.1.7/css/unicons.css">
        <!-- Main Css -->
        <link href="css/style.css" rel="stylesheet" type="text/css" id="theme-opt" />
        <link href="css/colors/default.css" rel="stylesheet" id="color-opt">

    </head>

    <body>
        <!-- Loader -->
        <!-- <div id="preloader">
            <div id="status">
                <div class="spinner">
                    <div class="double-bounce1"></div>
                    <div class="double-bounce2"></div>
                </div>
            </div>
        </div> -->
        <!-- Loader -->
        
        <!-- Navbar STart -->
        <header id="topnav" class="defaultscroll sticky">
            <div class="container">
                <!-- Logo container-->
                <div>
                    <a class="logo" href="index.html">
                        <img src="images/logo-dark.png" height="24" alt="">
                    </a>
                </div>                 
                <div class="buy-button">
                    <a href="https://1.envato.market/4n73n" target="_blank" class="btn btn-primary">Buy Now</a>
                </div><!--end login button-->
                <!-- End Logo container-->
                <div class="menu-extras">
                    <div class="menu-item">
                        <!-- Mobile menu toggle-->
                        <a class="navbar-toggle">
                            <div class="lines">
                                <span></span>
                                <span></span>
                                <span></span>
                            </div>
                        </a>
                        <!-- End mobile menu toggle-->
                    </div>
                </div>
        
                <div id="navigation">
                    <!-- Navigation Menu-->   
                    <ul class="navigation-menu">
                        <li><a href="index.html">Home</a></li>
                        <li class="has-submenu">
                            <a href="javascript:void(0)">Landing</a><span class="menu-arrow"></span>
                            <ul class="submenu megamenu">
                                <li>
                                    <ul>
                                        <li><a href="index-saas.html">Saas</a></li>
                                        <li><a href="index-classic-saas.html">Classic Saas</a></li>
                                        <li><a href="index-agency.html">Agency</a></li>
                                        <li><a href="index-apps.html">Application</a></li>
                                        <li><a href="index-classic-app.html">Classic Application</a></li>
                                        <li><a href="index-studio.html">Studio</a></li>
                                        <li><a href="index-business.html">Business</a></li>
                                        <li><a href="index-modern-business.html">Modern Business</a></li>
                                        <li><a href="index-hotel.html">Hotel</a></li>
                                        <li><a href="index-marketing.html">Marketing</a></li>
                                        <li><a href="index-enterprise.html">Enterprise </a></li>
                                    </ul>
                                </li>

                                <li>
                                    <ul>
                                        <li><a href="index-insurance.html">Insurance <span class="badge badge-danger rounded">v 2.2</span></a></li>
                                        <li><a href="index-shop.html">Shop <span class="badge badge-danger rounded">v 2.2</span></a></li>
                                        <li><a href="index-ebook.html">E-Book <span class="badge badge-danger rounded">v 2.2</span></a></li>
                                        <li><a href="index-coworking.html">Coworking</a></li>
                                        <li><a href="index-personal.html">Personal </a></li>
                                        <li><a href="index-services.html">Service </a></li>
                                        <li><a href="index-payments.html">Payments </a></li>
                                        <li><a href="index-crypto.html">Cryptocurrency </a></li>
                                        <li><a href="index-software.html">Software </a></li>
                                        <li><a href="index-car-riding.html">Car Ride</a></li>
                                    </ul>
                                </li>
                                <li>
                                    <ul>
                                        <li><a href="index-hosting.html">Hosting & Domain</a></li>
                                        <li><a href="index-event.html">Event</a></li>
                                        <li><a href="index-course.html">Course </a></li>
                                        <li><a href="index-online-learning.html">Online Learning</a></li>
                                        <li><a href="index-single-product.html">Product </a></li>
                                        <li><a href="index-portfolio.html">Portfolio </a></li>
                                        <li><a href="index-job.html">Job</a></li>
                                        <li><a href="index-customer.html">Customer</a></li>
                                        <li><a href="index-social-marketing.html">Social Media</a></li>
                                        <li><a href="index-digital-agency.html">Digital Agency</a></li>
                                        <li><a href="index-onepage.html">Saas <span class="badge badge-pill badge-warning ml-2">Onepage</span></a></li>
                                    </ul>
                                </li>   
                            </ul>
                        </li>
        
                        <li class="has-submenu">
                            <a href="javascript:void(0)">Pages</a><span class="menu-arrow"></span>
                            <ul class="submenu">
                                <li><a href="page-aboutus.html"> About Us</a></li>
                                <li><a href="page-services.html">Services</a></li>
                                <li><a href="page-pricing.html">Pricing</a></li>
                                <li><a href="page-team.html"> Team</a></li>
                                <li class="has-submenu"><a href="javascript:void(0)"> Account</a><span class="submenu-arrow"></span>
                                    <ul class="submenu">
                                        <li><a href="page-profile.html">Profile</a></li>
                                        <li><a href="page-profile-edit.html">Account Setting</a></li>
                                        <li><a href="page-invoice.html">Invoice</a></li>
                                    </ul>  
                                </li>
                                <li class="has-submenu"><a href="javascript:void(0)"> Shop <span class="badge badge-danger rounded">v 2.2</span></a><span class="submenu-arrow"></span>
                                    <ul class="submenu">
                                        <li><a href="shop-products.html">All Products <span class="badge badge-primary rounded">new</span></a></li>
                                        <li><a href="shop-product-detail.html">Product Details <span class="badge badge-primary rounded">new</span></a></li>
                                        <li><a href="shop-cart.html">Shop Cart <span class="badge badge-primary rounded">new</span></a></li>
                                        <li><a href="shop-checkouts.html">Checkouts <span class="badge badge-primary rounded">new</span></a></li>
                                        <li><a href="shop-myaccount.html">My Account <span class="badge badge-primary rounded">new</span></a></li>
                                    </ul>  
                                </li>
                                <li class="has-submenu"><a href="javascript:void(0)"> Help center <span class="badge badge-danger rounded">v 2.2</span></a><span class="submenu-arrow"></span>
                                    <ul class="submenu">
                                        <li><a href="helpcenter-overview.html">Helpcenter <span class="badge badge-primary rounded">new</span></a></li>
                                        <li><a href="helpcenter-faqs.html">Faqs <span class="badge badge-primary rounded">new</span></a></li>
                                        <li><a href="helpcenter-guides.html">Guides <span class="badge badge-primary rounded">new</span></a></li>
                                        <li><a href="helpcenter-support-request.html">Support Call <span class="badge badge-primary rounded">new</span></a></li>
                                    </ul>  
                                </li>
                                <li class="has-submenu"><a href="javascript:void(0)"> Email Template</a><span class="submenu-arrow"></span>
                                    <ul class="submenu">
                                        <li><a href="email-confirmation.html">Confirmation</a></li>
                                        <li><a href="email-password-reset.html">Reset Password</a></li>
                                        <li><a href="email-alert.html">Alert</a></li>
                                        <li><a href="email-invoice.html">Invoice</a></li>
                                    </ul>  
                                </li>
                                <li class="has-submenu"><a href="javascript:void(0)">Careers</a><span class="submenu-arrow"></span>
                                    <ul class="submenu">
                                        <li><a href="page-jobs.html">Jobs</a></li>
                                        <li><a href="page-jobs-sidebar.html">Jobs - Sidebar</a></li>
                                        <li><a href="page-job-detail.html">Job Detail</a></li>
                                        <li><a href="page-job-apply.html">Job Apply</a></li>
                                        <li><a href="page-job-company.html">Company</a></li>
                                        <li><a href="page-job-candidate.html">Candidate</a></li>
                                    </ul>  
                                </li>
                                <li class="has-submenu"><a href="javascript:void(0)"> Blog</a><span class="submenu-arrow"></span>
                                    <ul class="submenu">
                                        <li><a href="page-blog-grid.html">Blog Grid</a></li>
                                        <li><a href="page-blog-sidebar.html">Blog with Sidebar</a></li>
                                        <li><a href="page-blog-list.html">Blog Listing</a></li>
                                        <li><a href="page-blog-list-sidebar.html">Blog List & Sidebar</a></li>
                                        <li><a href="page-blog-detail.html">Blog Detail</a></li>
                                    </ul>  
                                </li>
                                <li class="has-submenu"><a href="javascript:void(0)"> Works</a><span class="submenu-arrow"></span>
                                    <ul class="submenu">
                                        <li><a href="page-work-modern.html">Works Modern</a></li>
                                        <li><a href="page-work-classic.html">Works Classic</a></li>
                                        <li><a href="page-work-grid.html">Works Grid</a></li>
                                        <li><a href="page-work-masonry.html">Works Masonry</a></li>
                                        <li><a href="page-work-detail.html">Work Detail</a></li>
                                    </ul>  
                                </li>
                                <li class="has-submenu"><a href="javascript:void(0)"> Auth Pages</a><span class="submenu-arrow"></span>
                                    <ul class="submenu">
                                        <li><a href="auth-login.html">Login</a></li>
                                        <li><a href="auth-cover-login.html">Login Cover</a></li>
                                        <li><a href="auth-login-three.html">Login Simple</a></li>
                                        <li><a href="auth-signup.html">Signup</a></li>
                                        <li><a href="auth-cover-signup.html">Signup Cover</a></li>
                                        <li><a href="auth-signup-three.html">Signup Simple</a></li>
                                        <li><a href="auth-re-password.html">Reset Password</a></li>
                                        <li><a href="auth-cover-re-password.html">Reset Password Cover</a></li>
                                        <li><a href="auth-re-password-three.html">Reset Password Simple</a></li>
                                    </ul>  
                                </li>
                                <li class="has-submenu"><a href="javascript:void(0)"> Utility </a><span class="submenu-arrow"></span>
                                    <ul class="submenu">
                                        <li><a href="page-terms.html">Terms of Services</a></li>
                                        <li><a href="page-privacy.html">Privacy Policy</a></li>
                                    </ul>  
                                </li>
                                <li class="has-submenu"><a href="javascript:void(0)"> Special </a><span class="submenu-arrow"></span>
                                    <ul class="submenu">
                                        <li><a href="page-comingsoon.html">Coming Soon</a></li>
                                        <li><a href="page-comingsoon2.html">Coming Soon Two </a></li>
                                        <li><a href="page-maintenance.html">Maintenance</a></li>
                                        <li><a href="page-error.html">Error</a></li>
                                    </ul>
                                </li>
                                <li class="has-submenu"><a href="javascript:void(0)"> Contact </a><span class="submenu-arrow"></span>
                                    <ul class="submenu">
                                        <li><a href="page-contact-detail.html">Contact Detail </a></li>
                                        <li><a href="page-contact-one.html">Contact One </a></li>
                                        <li><a href="page-contact-two.html">Contact Two </a></li>
                                        <li><a href="page-contact-three.html">Contact Three </a></li>
                                    </ul>  
                                </li>
                            </ul>
                        </li>
                        <li class="has-submenu">
                            <a href="javascript:void(0)">Docs</a><span class="menu-arrow"></span>
                            <ul class="submenu">
                                <li><a href="documentation.html">Documentation </a></li>
                                <li><a href="changelog.html">Changelog </a></li>
                                <li><a href="components.html">Components</a></li>
                                <li><a href="widget.html">Widget</a></li>
                            </ul>
                        </li>
                    </ul><!--end navigation menu-->
                    <div class="buy-menu-btn d-none">
                        <a href="https://1.envato.market/4n73n" target="_blank" class="btn btn-primary">Buy Now</a>
                    </div><!--end login button-->
                </div><!--end navigation-->
            </div><!--end container-->
        </header><!--end header-->
        <!-- Navbar End -->
        
        <!-- Hero Start -->
        <section class="bg-home rtl-personal-hero bg-light d-flex align-items-center" style="background:url('images/personal/bg01.png') center center" id="home">
            <div class="container">
                <div class="row align-items-center">
                    <div class="col-lg-8 col-md-9">
                        <div class="title-heading mt-4">
                            <h1 class="display-3 font-weight-bold mb-3">Here I'm <br> <span class="element" data-elements="Calvin Carlo, UI/UX Designer, Web Developer"></span> </h1>
                            <p class="para-desc text-muted">Launch your campaign and benefit from our expertise on designing and managing conversion centered bootstrap4 html page.</p>
                            <div class="mt-4 pt-2">
                                <a href="#portfolio" class="btn btn-primary mt-2 mr-2 mouse-down"><i class="mdi mdi-camera"></i> View Portfolio</a>
                                <a href="#contact" class="btn btn-outline-primary mt-2 mouse-down"><i class="mdi mdi-cloud-download"></i> Hire Me</a>
                            </div>
                        </div>
                    </div><!--end col-->
                </div><!--end row-->
            </div><!--end container-->
        </section><!--end section-->
        <!-- Hero End -->

        <!-- About Start -->
        <section class="section">
            <div class="container">
                <div class="row align-items-center">
                    <div class="col-md-6">
                        <div class="section-title">
                            <h4 class="title">About Me</h4>
                            <h6 class="text-primary mb-4">I'm Passionate Web Designer</h6>
                            <p class="text-muted mb-0">Start working with landrick that can provide everything you need to generate awareness, drive traffic, connect. Dummy text is also used to demonstrate the appearance of different typefaces and layouts, and in general the content of dummy text is nonsensical. Due to its widespread use as filler text for layouts, non-readability is of great importance: human perception is tuned to recognize certain patterns and repetitions in texts.</p>
                            <div class="mt-4">
                                <a href="#contact" class="btn btn-primary mouse-down"><i class="mdi mdi-phone"></i> Contact Me</a>
                            </div>
                        </div>
                    </div><!--end col-->

                    <div class="col-md-6 mt-4 mt-sm-0 pt-2 pt-sm-0">
                        <div class="ml-md-4">
                            <div class="progress-box">
                                <h6 class="title text-muted">WordPress</h6>
                                <div class="progress">
                                    <div class="progress-bar position-relative bg-primary" style="width:84%;">
                                        <div class="progress-value d-block text-muted h6">84%</div>
                                    </div>
                                </div>
                            </div><!--end process box-->
                            <div class="progress-box mt-4">
                                <h6 class="title text-muted">PHP / MYSQL</h6>
                                <div class="progress">
                                    <div class="progress-bar position-relative bg-primary" style="width:75%;">
                                        <div class="progress-value d-block text-muted h6">75%</div>
                                    </div>
                                </div>
                            </div><!--end process box-->
                            <div class="progress-box mt-4">
                                <h6 class="title text-muted">Angular / JavaScript</h6>
                                <div class="progress">
                                    <div class="progress-bar position-relative bg-primary" style="width:79%;">
                                        <div class="progress-value d-block text-muted h6">79%</div>
                                    </div>
                                </div>
                            </div><!--end process box-->
                            <div class="progress-box mt-4">
                                <h6 class="title text-muted">HTML</h6>
                                <div class="progress">
                                    <div class="progress-bar position-relative bg-primary" style="width:95%;">
                                        <div class="progress-value d-block text-muted h6">95%</div>
                                    </div>
                                </div>
                            </div><!--end process box-->
                            <div class="progress-box mt-4">
                                <h6 class="title text-muted">CSS</h6>
                                <div class="progress">
                                    <div class="progress-bar position-relative bg-primary" style="width:93%;">
                                        <div class="progress-value d-block text-muted h6">93%</div>
                                    </div>
                                </div>
                            </div><!--end process box-->
                        </div>
                    </div><!--end col-->
                </div><!--end row-->
            </div><!--end container-->

            <div class="container mt-100 mt-60" id="portfolio">
                <div class="row">
                    <div class="col-12">
                        <div class="section-title mb-4 pb-2">
                            <h4 class="title mb-4">My Work & Portfolio</h4>
                            <p class="text-muted para-desc mb-0">Start working with <span class="text-primary font-weight-bold">Landrick</span> that can provide everything you need to generate awareness, drive traffic, connect.</p>
                        </div>
                    </div><!--end col-->
                </div><!--end row-->

                <div class="row">
                    <div class="col-lg-4 col-md-6 col-12 mt-4 pt-2">
                        <div class="card border-0 work-container work-modern position-relative d-block overflow-hidden rounded">
                            <div class="card-body p-0">
                                <img src="images/personal/1.jpg" class="img-fluid" alt="work-image">
                                <div class="overlay-work bg-dark"></div>
                                <div class="content">
                                    <h5 class="mb-0"><a href="page-work-detail.html" class="text-white title">Iphone mockup</a></h5>
                                    <h6 class="text-light tag mb-0">Branding</h6>
                                </div>
                                <div class="icons text-center">
                                    <a href="images/personal/1.jpg" class="text-primary work-icon bg-white d-inline-block rounded-pill mfp-image"><i data-feather="camera" class="fea icon-sm"></i></a>
                                </div>
                            </div>
                        </div>
                    </div><!--end col-->
                    
                    <div class="col-lg-4 col-md-6 col-12 mt-4 pt-2">
                        <div class="card border-0 work-container work-modern position-relative d-block overflow-hidden rounded">
                            <div class="card-body p-0">
                                <img src="images/personal/2.jpg" class="img-fluid" alt="work-image">
                                <div class="overlay-work bg-dark"></div>
                                <div class="content">
                                    <h5 class="mb-0"><a href="page-work-detail.html" class="text-white title">Mockup Collection</a></h5>
                                    <h6 class="text-light tag mb-0">Mockup</h6>
                                </div>
                                <div class="icons text-center">
                                    <a href="images/personal/2.jpg" class="text-primary work-icon bg-white d-inline-block rounded-pill mfp-image"><i data-feather="camera" class="fea icon-sm"></i></a>
                                </div>
                            </div>
                        </div>
                    </div><!--end col-->
                    
                    <div class="col-lg-4 col-md-6 col-12 mt-4 pt-2">
                        <div class="card border-0 work-container work-modern position-relative d-block overflow-hidden rounded">
                            <div class="card-body p-0">
                                <img src="images/personal/3.jpg" class="img-fluid" alt="work-image">
                                <div class="overlay-work bg-dark"></div>
                                <div class="content">
                                    <h5 class="mb-0"><a href="page-work-detail.html" class="text-white title">Abstract images</a></h5>
                                    <h6 class="text-light tag mb-0">Abstract</h6>
                                </div>
                                <div class="icons text-center">
                                    <a href="images/personal/3.jpg" class="text-primary work-icon bg-white d-inline-block rounded-pill mfp-image"><i data-feather="camera" class="fea icon-sm"></i></a>
                                </div>
                            </div>
                        </div>
                    </div><!--end col-->
                    
                    <div class="col-lg-4 col-md-6 col-12 mt-4 pt-2">
                        <div class="card border-0 work-container work-modern position-relative d-block overflow-hidden rounded">
                            <div class="card-body p-0">
                                <img src="images/personal/4.jpg" class="img-fluid" alt="work-image">
                                <div class="overlay-work bg-dark"></div>
                                <div class="content">
                                    <h5 class="mb-0"><a href="page-work-detail.html" class="text-white title">Yellow bg with Books</a></h5>
                                    <h6 class="text-light tag mb-0">Books</h6>
                                </div>
                                <div class="icons text-center">
                                    <a href="images/personal/4.jpg" class="text-primary work-icon bg-white d-inline-block rounded-pill mfp-image"><i data-feather="camera" class="fea icon-sm"></i></a>
                                </div>
                            </div>
                        </div>
                    </div><!--end col-->
                    
                    <div class="col-lg-4 col-md-6 col-12 mt-4 pt-2">
                        <div class="card border-0 work-container work-modern position-relative d-block overflow-hidden rounded">
                            <div class="card-body p-0">
                                <img src="images/personal/5.jpg" class="img-fluid" alt="work-image">
                                <div class="overlay-work bg-dark"></div>
                                <div class="content">
                                    <h5 class="mb-0"><a href="page-work-detail.html" class="text-white title">Company V-card</a></h5>
                                    <h6 class="text-light tag mb-0">V-card</h6>
                                </div>
                                <div class="icons text-center">
                                    <a href="images/personal/5.jpg" class="text-primary work-icon bg-white d-inline-block rounded-pill mfp-image"><i data-feather="camera" class="fea icon-sm"></i></a>
                                </div>
                            </div>
                        </div>
                    </div><!--end col-->
                    
                    <div class="col-lg-4 col-md-6 col-12 mt-4 pt-2">
                        <div class="card border-0 work-container work-modern position-relative d-block overflow-hidden rounded">
                            <div class="card-body p-0">
                                <img src="images/personal/6.jpg" class="img-fluid" alt="work-image">
                                <div class="overlay-work bg-dark"></div>
                                <div class="content">
                                    <h5 class="mb-0"><a href="page-work-detail.html" class="text-white title">Mockup box with paints</a></h5>
                                    <h6 class="text-light tag mb-0">Photography</h6>
                                </div>
                                <div class="icons text-center">
                                    <a href="images/personal/6.jpg" class="text-primary work-icon bg-white d-inline-block rounded-pill mfp-image"><i data-feather="camera" class="fea icon-sm"></i></a>
                                </div>
                            </div>
                        </div>
                    </div><!--end col-->

                    <div class="col-12 mt-4 pt-2">
                        <a href="page-work-modern.html" class="btn btn-outline-primary">See More <i class="mdi mdi-chevron-right"></i></a>
                    </div><!--end col-->
                </div><!--end row-->
            </div><!--end container-->

            <div class="container mt-100 mt-60">
                <div class="row">
                    <div class="col-12">
                        <div class="section-title mb-4 pb-2">
                            <h4 class="title mb-4">Work Process</h4>
                            <p class="text-muted para-desc mb-0">Start working with <span class="text-primary font-weight-bold">Landrick</span> that can provide everything you need to generate awareness, drive traffic, connect.</p>
                        </div>
                    </div><!--end col-->
                </div><!--end row-->
                
                <div class="row">
                    <div class="col-md-4 mt-4 pt-2">
                        <div class="card work-process border-0 rounded shadow">
                            <div class="card-body">
                                <h4 class="title">Discuss The Project</h4>
                                <p class="text-muted para">The most well-known dummy text is the 'Lorem Ipsum', which is said to have originated in the 16th century.</p>
                                <a href="javascript:void(0)" class="text-primary">Read more <i class="mdi mdi-chevron-right"></i></a>
                                <ul class="list-unstyled d-flex justify-content-between mb-0 mt-2">
                                    <li class="step h1 mb-0 font-weight-bold">Step 01.</li>
                                    <li class="step-icon"><i class="mdi mdi-chevron-double-right mdi-36px"></i></li>
                                </ul>
                            </div>
                        </div>
                    </div><!--end col-->
                    
                    <div class="col-md-4 mt-4 pt-2">
                        <div class="card work-process border-0 rounded shadow">
                            <div class="card-body">
                                <h4 class="title">Develop & Elaborate</h4>
                                <p class="text-muted para">The most well-known dummy text is the 'Lorem Ipsum', which is said to have originated in the 16th century.</p>
                                <a href="javascript:void(0)" class="text-primary">Read more <i class="mdi mdi-chevron-right"></i></a>
                                <ul class="list-unstyled d-flex justify-content-between mb-0 mt-2">
                                    <li class="step h1 mb-0 font-weight-bold">Step 02.</li>
                                    <li class="step-icon"><i class="mdi mdi-chevron-double-right mdi-36px"></i></li>
                                </ul>
                            </div>
                        </div>
                    </div><!--end col-->
                    
                    <div class="col-md-4 mt-4 pt-2">
                        <div class="card work-process border-0 rounded shadow">
                            <div class="card-body">
                                <h4 class="title">Final Approvement</h4>
                                <p class="text-muted para">The most well-known dummy text is the 'Lorem Ipsum', which is said to have originated in the 16th century.</p>
                                <a href="javascript:void(0)" class="text-primary">Read more <i class="mdi mdi-chevron-right"></i></a>
                                <ul class="list-unstyled d-flex justify-content-between mb-0 mt-2">
                                    <li class="step h1 mb-0 font-weight-bold">Step 03.</li>
                                    <li class="step-icon"><i class="mdi mdi-check-all mdi-36px"></i></li>
                                </ul>
                            </div>
                        </div>
                    </div><!--end col-->
                </div><!--end row-->
            </div><!--end container-->
        </section><!--end section-->
        <!-- About End -->

        <!-- Testi Start -->
        <section class="section" style="background: url('images/personal/bg02.jpg') center center;">
            <div class="bg-overlay"></div>
            <div class="container">
                <div class="row justify-content-center">
                    <div class="col-lg-7 text-center">
                        <div id="owl-fade" class="owl-carousel owl-theme">
                            <div class="customer-testi text-center">
                                <p class="text-light para-dark h6 font-italic">" It seems that only fragments of the original text remain in the Lorem Ipsum texts used today. The most well-known dummy text is the 'Lorem Ipsum', which is said to have originated in the 16th century. "</p>
                                <ul class="list-unstyled mb-0 mt-3">
                                    <li class="list-inline-item"><i class="mdi mdi-star text-warning"></i></li>
                                    <li class="list-inline-item"><i class="mdi mdi-star text-warning"></i></li>
                                    <li class="list-inline-item"><i class="mdi mdi-star text-warning"></i></li>
                                    <li class="list-inline-item"><i class="mdi mdi-star text-warning"></i></li>
                                    <li class="list-inline-item"><i class="mdi mdi-star text-warning"></i></li>
                                </ul>
                                <h6 class="text-light title-dark"> Thomas Israel </h6>
                                <img src="images/client/01.jpg" class="img-fluid avatar avatar-small mt-3 rounded-circle mx-auto shadow" alt="">
                            </div><!--end customer testi-->
                            
                            <div class="customer-testi text-center">
                                <p class="text-light para-dark h6 font-italic">" The advantage of its Latin origin and the relative meaninglessness of Lorum Ipsum is that the text does not attract attention to itself or distract the viewer's attention from the layout. "</p>
                                <ul class="list-unstyled mb-0 mt-3">
                                    <li class="list-inline-item"><i class="mdi mdi-star text-warning"></i></li>
                                    <li class="list-inline-item"><i class="mdi mdi-star text-warning"></i></li>
                                    <li class="list-inline-item"><i class="mdi mdi-star text-warning"></i></li>
                                    <li class="list-inline-item"><i class="mdi mdi-star text-warning"></i></li>
                                    <li class="list-inline-item"><i class="mdi mdi-star text-warning"></i></li>
                                </ul>
                                <h6 class="text-light title-dark"> Carl Oliver </h6>
                                <img src="images/client/02.jpg" class="img-fluid avatar avatar-small mt-3 rounded-circle mx-auto shadow" alt="">
                            </div><!--end customer testi-->
                            
                            <div class="customer-testi text-center">
                                <p class="text-light para-dark h6 font-italic">" There is now an abundance of readable dummy texts. These are usually used when a text is required purely to fill a space. These alternatives to the classic Lorem Ipsum texts are often amusing and tell short, funny or nonsensical stories. "</p>
                                <ul class="list-unstyled mb-0 mt-3">
                                    <li class="list-inline-item"><i class="mdi mdi-star text-warning"></i></li>
                                    <li class="list-inline-item"><i class="mdi mdi-star text-warning"></i></li>
                                    <li class="list-inline-item"><i class="mdi mdi-star text-warning"></i></li>
                                    <li class="list-inline-item"><i class="mdi mdi-star text-warning"></i></li>
                                    <li class="list-inline-item"><i class="mdi mdi-star text-warning"></i></li>
                                </ul>
                                <h6 class="text-light title-dark"> Barbara McIntosh </h6>
                                <img src="images/client/03.jpg" class="img-fluid avatar avatar-small mt-3 rounded-circle mx-auto shadow" alt="">
                            </div><!--end customer testi-->
                            
                            <div class="customer-testi text-center">
                                <p class="text-light para-dark h6 font-italic">" According to most sources, Lorum Ipsum can be traced back to a text composed by Cicero in 45 BC. Allegedly, a Latin scholar established the origin of the text by compiling all the instances of the unusual word 'consectetur' he could find "</p>
                                <ul class="list-unstyled mb-0 mt-3">
                                    <li class="list-inline-item"><i class="mdi mdi-star text-warning"></i></li>
                                    <li class="list-inline-item"><i class="mdi mdi-star text-warning"></i></li>
                                    <li class="list-inline-item"><i class="mdi mdi-star text-warning"></i></li>
                                    <li class="list-inline-item"><i class="mdi mdi-star text-warning"></i></li>
                                    <li class="list-inline-item"><i class="mdi mdi-star text-warning"></i></li>
                                </ul>
                                <h6 class="text-light title-dark"> Christa Smith </h6>
                                <img src="images/client/04.jpg" class="img-fluid avatar avatar-small mt-3 rounded-circle mx-auto shadow" alt="">
                            </div><!--end customer testi-->
                            
                            <div class="customer-testi text-center">
                                <p class="text-light para-dark h6 font-italic">" It seems that only fragments of the original text remain in the Lorem Ipsum texts used today. The most well-known dummy text is the 'Lorem Ipsum', which is said to have originated in the 16th century. "</p>
                                <ul class="list-unstyled mb-0 mt-3">
                                    <li class="list-inline-item"><i class="mdi mdi-star text-warning"></i></li>
                                    <li class="list-inline-item"><i class="mdi mdi-star text-warning"></i></li>
                                    <li class="list-inline-item"><i class="mdi mdi-star text-warning"></i></li>
                                    <li class="list-inline-item"><i class="mdi mdi-star text-warning"></i></li>
                                    <li class="list-inline-item"><i class="mdi mdi-star text-warning"></i></li>
                                </ul>
                                <h6 class="text-light title-dark"> Dean Tolle </h6>
                                <img src="images/client/05.jpg" class="img-fluid avatar avatar-small mt-3 rounded-circle mx-auto shadow" alt="">
                            </div><!--end customer testi-->
                            
                            <div class="customer-testi text-center">
                                <p class="text-light para-dark h6 font-italic">" It seems that only fragments of the original text remain in the Lorem Ipsum texts used today. One may speculate that over the course of time certain letters were added or deleted at various positions within the text. "</p>
                                <ul class="list-unstyled mb-0 mt-3">
                                    <li class="list-inline-item"><i class="mdi mdi-star text-warning"></i></li>
                                    <li class="list-inline-item"><i class="mdi mdi-star text-warning"></i></li>
                                    <li class="list-inline-item"><i class="mdi mdi-star text-warning"></i></li>
                                    <li class="list-inline-item"><i class="mdi mdi-star text-warning"></i></li>
                                    <li class="list-inline-item"><i class="mdi mdi-star text-warning"></i></li>
                                </ul>
                                <h6 class="text-light title-dark"> Jill Webb </h6>
                                <img src="images/client/06.jpg" class="img-fluid avatar avatar-small mt-3 rounded-circle mx-auto shadow" alt="">
                            </div><!--end customer testi-->
                        </div><!--end owl carousel-->
                    </div><!--end col-->
                </div><!--end row-->
            </div><!--end container-->
        </section><!--end section-->
        <!-- Testi End -->

        <!-- Client start -->
        <section class="py-4 border-bottom">
            <div class="container">
                <div class="row justify-content-center">
                    <div class="col-lg-2 col-md-2 col-6 text-center py-4">
                        <img src="images/client/amazon.svg" class="avatar avatar-ex-sm" alt="">
                    </div><!--end col-->

                    <div class="col-lg-2 col-md-2 col-6 text-center py-4">
                        <img src="images/client/google.svg" class="avatar avatar-ex-sm" alt="">
                    </div><!--end col-->
                    
                    <div class="col-lg-2 col-md-2 col-6 text-center py-4">
                        <img src="images/client/lenovo.svg" class="avatar avatar-ex-sm" alt="">
                    </div><!--end col-->
                    
                    <div class="col-lg-2 col-md-2 col-6 text-center py-4">
                        <img src="images/client/paypal.svg" class="avatar avatar-ex-sm" alt="">
                    </div><!--end col-->
                    
                    <div class="col-lg-2 col-md-2 col-6 text-center py-4">
                        <img src="images/client/shopify.svg" class="avatar avatar-ex-sm" alt="">
                    </div><!--end col-->
                    
                    <div class="col-lg-2 col-md-2 col-6 text-center py-4">
                        <img src="images/client/spotify.svg" class="avatar avatar-ex-sm" alt="">
                    </div><!--end col-->
                </div><!--end row-->
            </div><!--end container-->
        </section><!--end section-->
        <!-- Client End -->

        <!-- Blog Start -->
        <section class="section">
            <div class="container">
                <div class="row justify-content-center">
                    <div class="col-12">
                        <div class="section-title mb-4 pb-2">
                            <h4 class="title mb-4">Latest News</h4>
                            <p class="text-muted para-desc mb-0">Start working with <span class="text-primary font-weight-bold">Landrick</span> that can provide everything you need to generate awareness, drive traffic, connect.</p>
                        </div>
                    </div><!--end col-->
                </div><!--end row-->

                <div class="row">
                    <div class="col-lg-4 col-md-6 mt-4 pt-2">
                        <div class="card blog rounded border-0 shadow">
                            <div class="position-relative">
                                <img src="images/personal/1.jpg" class="card-img-top rounded-top" alt="...">
                            <div class="overlay rounded-top bg-dark"></div>
                            </div>
                            <div class="card-body content">
                                <h5><a href="javascript:void(0)" class="card-title title text-dark">Design your apps in your own way</a></h5>
                                <div class="post-meta d-flex justify-content-between mt-3">
                                    <ul class="list-unstyled mb-0">
                                        <li class="list-inline-item mr-2 mb-0"><a href="javascript:void(0)" class="text-muted like"><i class="mdi mdi-heart-outline mr-1"></i>33</a></li>
                                        <li class="list-inline-item"><a href="javascript:void(0)" class="text-muted comments"><i class="mdi mdi-comment-outline mr-1"></i>08</a></li>
                                    </ul>
                                    <a href="page-blog-detail.html" class="text-muted readmore">Read More <i class="mdi mdi-chevron-right"></i></a>
                                </div>
                            </div>
                            <div class="author">
                                <small class="text-light user d-block"><i class="mdi mdi-account"></i> Calvin Carlo</small>
                                <small class="text-light date"><i class="mdi mdi-calendar-check"></i> 13th August, 2019</small>
                            </div>
                        </div>
                    </div><!--end col-->
                    
                    <div class="col-lg-4 col-md-6 mt-4 pt-2">
                        <div class="card blog rounded border-0 shadow">
                            <div class="position-relative">
                                <img src="images/personal/2.jpg" class="card-img-top rounded-top" alt="...">
                            <div class="overlay rounded-top bg-dark"></div>
                            </div>
                            <div class="card-body content">
                                <h5><a href="javascript:void(0)" class="card-title title text-dark">How apps is changing the IT world</a></h5>
                                <div class="post-meta d-flex justify-content-between mt-3">
                                    <ul class="list-unstyled mb-0">
                                        <li class="list-inline-item mr-2 mb-0"><a href="javascript:void(0)" class="text-muted like"><i class="mdi mdi-heart-outline mr-1"></i>33</a></li>
                                        <li class="list-inline-item"><a href="javascript:void(0)" class="text-muted comments"><i class="mdi mdi-comment-outline mr-1"></i>08</a></li>
                                    </ul>
                                    <a href="page-blog-detail.html" class="text-muted readmore">Read More <i class="mdi mdi-chevron-right"></i></a>
                                </div>
                            </div>
                            <div class="author">
                                <small class="text-light user d-block"><i class="mdi mdi-account"></i> Calvin Carlo</small>
                                <small class="text-light date"><i class="mdi mdi-calendar-check"></i> 13th August, 2019</small>
                            </div>
                        </div>
                    </div><!--end col-->
                    
                    <div class="col-lg-4 col-md-6 mt-4 pt-2">
                        <div class="card blog rounded border-0 shadow">
                            <div class="position-relative">
                                <img src="images/personal/3.jpg" class="card-img-top rounded-top" alt="...">
                            <div class="overlay rounded-top bg-dark"></div>
                            </div>
                            <div class="card-body content">
                                <h5><a href="javascript:void(0)" class="card-title title text-dark">Smartest Applications for Business</a></h5>
                                <div class="post-meta d-flex justify-content-between mt-3">
                                    <ul class="list-unstyled mb-0">
                                        <li class="list-inline-item mr-2 mb-0"><a href="javascript:void(0)" class="text-muted like"><i class="mdi mdi-heart-outline mr-1"></i>33</a></li>
                                        <li class="list-inline-item"><a href="javascript:void(0)" class="text-muted comments"><i class="mdi mdi-comment-outline mr-1"></i>08</a></li>
                                    </ul>
                                    <a href="page-blog-detail.html" class="text-muted readmore">Read More <i class="mdi mdi-chevron-right"></i></a>
                                </div>
                            </div>
                            <div class="author">
                                <small class="text-light user d-block"><i class="mdi mdi-account"></i> Calvin Carlo</small>
                                <small class="text-light date"><i class="mdi mdi-calendar-check"></i> 13th August, 2019</small>
                            </div>
                        </div>
                    </div><!--end col-->

                    <div class="col-12 mt-4 pt-2">
                        <a href="page-blog-grid.html" class="btn btn-primary">See More <i class="mdi mdi-chevron-right"></i></a>
                    </div><!--end col-->
                </div><!--end row-->
            </div><!--end container-->

            <div class="container mt-100 mt-60" id="contact">
                <div class="row justify-content-center">
                    <div class="col-12">
                        <div class="section-title mb-4 pb-2">
                            <h4 class="title mb-4">Contact Me</h4>
                            <p class="text-muted para-desc mb-0">Start working with <span class="text-primary font-weight-bold">Landrick</span> that can provide everything you need to generate awareness, drive traffic, connect.</p>
                        </div>
                    </div><!--end col-->
                </div><!--end row-->

                <div class="row">
                    <div class="col-lg-4 col-md-6  mt-4 pt-2">
                        <div class="card rounded shadow border-0">
                            <div class="card-body py-5">
                                <h4 class="card-title">Get In Touch !</h4>
                                <div class="custom-form mt-3">
                                    <div id="message"></div>
                                    <form method="post" action="php/contact.php" name="contact-form" id="contact-form">
                                        <div class="row">
                                            <div class="col-md-12">
                                                <div class="form-group position-relative">
                                                    <label>Your Name <span class="text-danger">*</span></label>
                                                    <i data-feather="user" class="fea icon-sm icons"></i>
                                                    <input name="name" id="name" type="text" class="form-control pl-5" placeholder="First Name :">
                                                </div>
                                            </div><!--end col-->
                                            <div class="col-md-12">
                                                <div class="form-group position-relative">
                                                    <label>Your Email <span class="text-danger">*</span></label>
                                                    <i data-feather="mail" class="fea icon-sm icons"></i>
                                                    <input name="email" id="email" type="email" class="form-control pl-5" placeholder="Your email :">
                                                </div> 
                                            </div><!--end col-->
                                            <div class="col-md-12">
                                                <div class="form-group position-relative">
                                                    <label>Comments</label>
                                                    <i data-feather="message-circle" class="fea icon-sm icons"></i>
                                                    <textarea name="comments" id="comments" rows="4" class="form-control pl-5" placeholder="Your Message :"></textarea>
                                                </div>
                                            </div>
                                        </div><!--end row-->
                                        <div class="row">
                                            <div class="col-sm-12 text-center">
                                                <input type="submit" id="submit" name="send" class="submitBnt btn btn-primary btn-block" value="Send Message">
                                                <div id="simple-msg"></div>
                                            </div><!--end col-->
                                        </div><!--end row-->
                                    </form><!--end form-->
                                </div><!--end custom-form-->
                            </div>
                        </div>
                    </div><!--end col-->

                    <div class="col-lg-8 col-md-6 pl-md-3 pr-md-3 mt-4 pt-2">
                        <div class="card border-0 shadow rounded">
                            <div class="map map-height-two map-gray">
                                <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d39206.002432144705!2d-95.4973981212445!3d29.709510002925988!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x8640c16de81f3ca5%3A0xf43e0b60ae539ac9!2sGerald+D.+Hines+Waterwall+Park!5e0!3m2!1sen!2sin!4v1566305861440!5m2!1sen!2sin" style="border:0" class="rounded" allowfullscreen=""></iframe>
                            </div>
                        </div>
                    </div><!--end col-->
                </div><!--end row-->
            </div><!--end container-->
        </section><!--end section-->
        <!-- Blog End -->

        <!-- Footer Start -->
        <footer class="footer footer-bar">
            <div class="container text-center">
                <div class="row align-items-center">
                    <div class="col-sm-6">
                        <div class="text-sm-left">
                            <p class="mb-0">© 2019-20 Landrick. Design with <i class="mdi mdi-heart text-danger"></i> by <a href="http://www.shreethemes.in/" target="_blank" class="text-reset">Shreethemes</a>.</p>
                        </div>
                    </div>

                    <div class="col-sm-6 mt-4 mt-sm-0 pt-2 pt-sm-0">
                        <ul class="list-unstyled social-icon social text-sm-right mb-0">
                            <li class="list-inline-item mb-0"><a href="javascript:void(0)" class="rounded"><i data-feather="facebook" class="fea icon-sm fea-social"></i></a></li>
                            <li class="list-inline-item mb-0"><a href="javascript:void(0)" class="rounded"><i data-feather="instagram" class="fea icon-sm fea-social"></i></a></li>
                            <li class="list-inline-item mb-0"><a href="javascript:void(0)" class="rounded"><i data-feather="twitter" class="fea icon-sm fea-social"></i></a></li>
                            <li class="list-inline-item mb-0"><a href="javascript:void(0)" class="rounded"><i data-feather="linkedin" class="fea icon-sm fea-social"></i></a></li>
                        </ul><!--end icon-->
                    </div><!--end col-->
                </div><!--end row-->
            </div><!--end container-->
        </footer><!--end footer-->
        <!-- Footer End -->

        <!-- Start Style switcher -->
        <div id="style-switcher" style="left: 0px;" class="bg-light border p-3 pt-2 pb-2">
            <h3 class="title text-center">Select Your Color</h3>
            <ul class="pattern text-center mb-2">
                <li class="list-inline-item">
                    <a class="default" href="#"></a>
                </li>
                <li class="list-inline-item">
                    <a class="green" href="#"></a>
                </li>
                <li class="list-inline-item">
                    <a class="red" href="#"></a>
                </li>
                <li class="list-inline-item">
                    <a class="skyblue" href="#"></a>
                </li>
                <li class="list-inline-item">
                    <a class="skobleoff" href="#"></a>
                </li>  
                <li class="list-inline-item">
                    <a class="cyan" href="#"></a>
                </li>            
            </ul>

            <h3 class="title text-center pt-3 mb-0 border-top">Theme Option</h3>
            <div class="text-center">
                <a href="#" class="btn btn-sm w-100 btn-primary rtl-version t-rtl-light mt-2">RTL</a>
                <a href="#" class="btn btn-sm w-100 btn-primary ltr-version t-ltr-light mt-2">LTR</a>
                <a href="#" class="btn btn-sm w-100 btn-primary dark-rtl-version t-rtl-dark mt-2">RTL</a>
                <a href="#" class="btn btn-sm w-100 btn-primary dark-ltr-version t-ltr-dark mt-2">LTR</a>
                <a href="#" class="btn btn-sm w-100 btn-dark dark-version t-dark mt-2">Dark</a>
                <a href="#" class="btn btn-sm w-100 btn-dark light-version t-light mt-2">Light</a>
            </div>
            <div class="bottom">
                <a href="#" class="settings bg-white shadow d-block"><i class="mdi mdi-cog ml-1 mdi-24px position-absolute mdi-spin text-primary"></i></a>
            </div>
        </div>
        <!-- End Style switcher -->

        <!-- Back to top -->
        <a href="#" class="btn btn-icon btn-soft-primary back-to-top"><i data-feather="arrow-up" class="icons"></i></a>
        <!-- Back to top -->

        <!-- javascript -->
        <script src="js/jquery-3.5.1.min.js"></script>
        <script src="js/bootstrap.bundle.min.js"></script>
        <script src="js/jquery.easing.min.js"></script>
        <script src="js/scrollspy.min.js"></script>
        <!-- Magnific -->
        <script src="js/isotope.js"></script>
        <script src="js/jquery.magnific-popup.min.js"></script>
        <script src="js/portfolio.init.js"></script>
        <!-- SLIDER -->
        <script src="js/owl.carousel.min.js "></script>
        <script src="js/owl.init.js "></script> 
        <!-- Contact -->
        <script src="js/contact.js "></script>
        <!-- Typed -->
        <script src="js/typed.js"></script>
        <script src="js/typed.init.js"></script>
        <!-- Icons -->
        <script src="js/feather.min.js"></script>
        <script src="https://unicons.iconscout.com/release/v2.1.9/script/monochrome/bundle.js"></script>
        <!-- Switcher -->
        <script src="js/switcher.js"></script>
        <!-- Main Js -->
        <script src="js/app.js"></script>
    </body>
</html>